<html>

<head>
    <title>VUE-TABLE插件</title>


    <style>
        .table {
            width: 100%;
            border-collapse: collapse;
            text-align: center;
        }

        .table th,
        .table td {
            border-bottom: 1px solid #e7e7e7;
            padding: 5px;
        }

        .table thead th,
        .table thead td {
            border-bottom: 1px solid #ccc;
        }

        input[type=checkbox] {
            width: 18px;
            height: 18px;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <vue-table class="table" :rows="rows">

            <template #columns>

                <column title="全选实现1">

                    <label><input type="checkbox" @change="toggleCheckAll($event)" :checked="rows.every(w=>w.checked)">
                        全选实现1</label>
                    <template #cell>
                        <cell-templ v-slot="cell">
                            <label><input type="checkbox" v-model="cell.row.checked"> {{cell.rowIndex+1}}</label>
                        </cell-templ>
                    </template>

                </column>

                <column title="全选实现2" :checkedall="$shallowRef(rows.every(w=>w.checked1))">
                    <head-templ v-slot="head">
                        {{head.columnProps.title}}
                        <button @click="()=>{
                            head.columnProps.checkedall.value=!head.columnProps.checkedall.value; 
                            rows.forEach(w=>w.checked1=head.columnProps.checkedall.value)}">
                            {{ head.columnProps.checkedall.value?'取消全选':'全选'}}
                        </button>

                    </head-templ>

                    <template #cell>
                        <cell-templ v-slot="cell">
                            <label><input type="checkbox" v-model="cell.row.checked1"> {{cell.rowIndex+1}}</label>
                        </cell-templ>
                    </template>

                </column>
                <column :required="true" :title="$ref('姓名')">
                    <head-templ v-slot="head">

                        <input v-model="head.columnProps.title.value" />

                        {{head.columnProps.title.value}}
                        <span v-if="head.columnProps.required" style="color:red">*</span>
                    </head-templ>
                    <template #cell>
                        <cell-templ v-slot="cell" :editable="$ref(false)">


                            <span v-if="!cell.cellProps.editable.value">{{cell.row.name}} </span>
                            <input v-else v-model="cell.row.name" />
                            <button
                                @click="toggle(cell.cellProps.editable)">{{cell.cellProps.editable.value?'保存':'编辑'}}</button>
                        </cell-templ>
                    </template>

                </column>
                <column title="工资" :toggle="$ref(false)">
                    <head-templ v-slot="head">
                        {{head.columnProps.title}}（总额：
                        <template v-if="!head.columnProps.toggle.value">
                            {{rows.reduce((v,w)=>v+ (parseFloat(w.money)||0),0)}}
                        </template>
                        <span v-else>******</span>
                        ）
                        <button
                            @click="toggle(head.columnProps.toggle)">{{head.columnProps.toggle.value?'显示':'隐藏'}}</button>


                    </head-templ>

                    <template #cell>
                        <cell-templ v-slot="cell" :editable="$ref(false)">
                            <template v-if="!cell.columnProps.toggle.value">

                                <span v-if="!cell.cellProps.editable.value">{{cell.row.money}} </span>
                                <input v-else v-model="cell.row.money" />
                                <button
                                    @click="toggle(cell.cellProps.editable)">{{cell.cellProps.editable.value?'保存':'编辑'}}</button>

                            </template>
                            <span v-else @dblclick="toggle(cell.columnProps.toggle)">******</span>
                        </cell-templ>
                    </template>

                </column>
                <column title="#">
                    <head-templ v-slot="head">
                        <button @click="empty">清空</button>
                    </head-templ>

                    <template #cell>
                        <cell-templ v-slot="cell">
                            <button @click="remove(cell.row)">删除</button>

                        </cell-templ>
                    </template>

                </column>
            </template>
            <template #empty>
                <tr>
                    <td colspan="99" style="height: 120px;">

                        <button @click="insertRow">新增记录</button>
                    </td>

                </tr>
            </template>
            <template #footer>
                <tr>

                    <td colspan="99" style="text-align: right;">
                        <button @click="insertRow">新增记录</button>
                    </td>
                </tr>
            </template>
        </vue-table>

    </div>
    <script src="vue.global.prod.js"></script>

    <script src="vue.table.js"></script>
    <script>

        window.onload = function () {
            const app = Vue.createApp({
                data() {
                    return {
                        edit: true,
                        nameTitle: '姓名',
                        rows: [
                            { code: 1, name: "张三", money: 4300 }, { code: 2, name: "李氏", money: 3800 },
                            { code: 3, name: "王五", money: 5200 }, { code: 4, name: "皇太极", money: 13000 }
                        ],
                    }
                },
                methods: {
                    toggle: function (props) {
                        props.value = !props.value;
                    },
                    insertRow: function () {
                        this.rows.push({ name: '测试', money: 0 })
                    },
                    empty: function () {
                        this.rows = [];
                    },
                    remove: function (item) {
                        this.rows.splice(this.rows.indexOf(item), 1);
                    },
                    toggleCheckAll: function (evnt) {
                        for (let row of this.rows) row.checked = evnt.target.checked;
                    }
                },
                created: function () {

                    for (var i = 0; i < 20; i++) {
                        this.rows.push({ code: i, name: 'Name' + i, money: 4000 + i })
                    }

                }
            });

            app.use(VueTablePlugin, {});

            app.mount('#wrapper');


        }

    </script>
</body>

</html>